<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Hermes translate</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    textarea { width: 100%; height: 100px; margin: 10px 0; }
    button { padding: 10px 20px; font-size: 16px; }
  </style>
</head>
<body>

  <h1>🌐 Hermes translate</h1>

  <label for="inputText">输入语言/Input Language：</label>
  <textarea id="inputText" placeholder="请输入需要翻译的内容/your language"></textarea>

  <label for="outputText">输出语言/Output Language：</label>
  <textarea id="outputText" placeholder="翻译结果将在此显示/translate result" readonly></textarea>

  <button onclick="translateText()">翻译 Translate</button>

  <script>
    async function translateText() {
      const inputText = document.getElementById("inputText").value;

      if (!inputText.trim()) {
        alert("请输入内容");
        return;
      }

      try {
        // 获取用户地理位置
        navigator.geolocation.getCurrentPosition(async (position) => {
          const latitude = position.coords.latitude;
          const longitude = position.coords.longitude;

          // POST 请求体
          const payload = {
            text: inputText,
            location: {
              latitude,
              longitude
            }
          };

          // 调用 Web API
          const response = await fetch("http://localhost:8080/translate", {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify(payload)
          });

          const result = await response.json();

          if (response.ok && result.code) {
            document.getElementById("outputText").value = result.message;
          } else {
            document.getElementById("outputText").value = "翻译失败：" + (result.error || "未知错误");
          }

        }, (error) => {
          alert("无法获取地理位置：" + error.message);
        });

      } catch (err) {
        console.error(err);
        alert("发生错误：" + err.message);
      }
    }
  </script>

</body>
</html>